import { Popover, Space, Avatar, Image, message } from 'antd'
import { Header } from 'antd/lib/layout/layout'
import router from 'next/router'
import { useEffect, useCallback, useRef, useState } from 'react'
import { IUser } from '../../models/types'
import { UserService } from '../../services'

import styles from './style.module.scss'

interface Props {
  user: IUser
}

export default function HeaderBar({ user }: Props) {

  return (
    <Header className={styles.header}>
      <h1 onClick={() => router.push('/')}>中南民族大学二手书交易系统管理端</h1>
      <Space align="center" size='middle'>
        <h3>{user.username}</h3>
        <Popover
          placement='bottom'
          content={<a onClick={async () => {
            const res = await UserService.logout()
            if (res.stat === 'OK') {
              message.success('登出成功')
              router.push('/login')
            }
          }}>退出登录</a>}
          trigger="click" >
          <Avatar
            className={styles.avatar}
            size='large'
            src={<Image
              preview={false}
              src={user.avatar} alt=''
            />}
          />
        </Popover>
      </Space>
    </Header>
  )
}
